<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p><Back></Back>密码修改</p>
		</header>
		<!-- 表单部分 -->
		<ul class="form-box">
			<li>
				<div class="title">
					用户名：
				</div>
				<div class="content">
					{{user.userName}}
				</div>
			</li>
			<li>
				<div class="title">
					原密码：
				</div>
				<div class="content">
					<input v-model="user.oldPassword" type="password" placeholder="密码">
				</div>
			</li>
			<li>
				<div class="title">
					新密码：
				</div>
				<div class="content">
					<input v-model="user.new1Password" type="password" placeholder="确认密码">
				</div>
			</li>
			<li>
				<div class="title">
					确认密码：
				</div>
				<div class="content">
					<input v-model="user.new2Password" type="password" placeholder="确认密码">
				</div>
			</li>
		</ul>
		<div class="button-login">
			<button @click=" updatePwd()">修改</button>
		</div>
		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';
import Back from '../components/Back.vue';

export default {
	name: 'Register',
	components: {
		Footer,
		Back
	},
	data() {
		return {
			user: {
				userId: '',
				userName: '',
				password: '',
				oldPassword:'',
				new1Password: '',
				new2Password: '',
			}
		}
	},
	created() {
		 this.user = this.$getSessionStorage("user");
		
	},
	methods: {
		// 获取用户信息
		async updatePwd() {
			let user = this.user;
			// 1. 输入是否为空
			if (user.oldPassword ==null ||
				user.new1Password== null ||
				user.new2Password== null) {
				alert("输入不能为空!");
				return;
			}
			
			else if (!/^[A-Za-z0-9]{6,}$/.test(user.new1Password)) {
			        alert('密码需包含且只能包含大、小写字母和数字，长度至少为6位！');
			        return;
			      }
				
				 
			
			
			
			
			
			console.log('new1Password:  '+user.new1Password);
			console.log('new2Password:  '+user.new2Password);
		   if (user.new1Password != user.new2Password) {
			 	alert("两次密码输入不一致!");
			 	return;
			 }

			// 5. 提交表单,注册账号
			let url2 = 'UserController/updateUserPass';
			let response = await this.$axios.post(url2, this.$qs.stringify({
				userId: user.userId,
				oldPassword: user.oldPassword,
				newPassword: user.new1Password
			}));
			//注册成功 则带着注册的账号密码跳转到登陆页面
			if(response.data == 0){
				 	alert("输入的密码与原密码不符！");
				 	return;
			}
			else if (user.oldPassword== user.new1Password ) {  
				alert("修改密码与原密码相同!");
				return;
			}
			 if (response.data == 1) {
				 this.$router.push({
				 	path: '/myInfo'
				 });

			}
		}
	}

}
</script>

<style scoped="scoped">
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #f5f7fa; 
  padding-bottom: 10vw; 
}


.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #007BFF;
  color: #fff;
  font-size: 5vw; 
  font-weight: 600;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}


.wrapper .form-box {
  width: 90%;
  margin: 16vw auto 0;
  background-color: #fff; 
  border-radius: 8px;
  padding: 4vw;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


.wrapper .form-box li {
  box-sizing: border-box;
  padding: 4vw 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd; 
}

.wrapper .form-box li:last-child {
  border-bottom: none; 
}

.wrapper .form-box li .title {
  flex: 0 0 20vw;
  font-size: 3.6vw;
  font-weight: 600;
  color: #333; 
}

.wrapper .form-box li .content {
  flex: 1;
}

.wrapper .form-box li .content input {
  width: 100%;
  height: 8vw; 
  font-size: 3.6vw;
  padding: 2vw;
  border: 1px solid #ccc; 
  border-radius: 4px; 
  outline: none;
  transition: border-color 0.3s; 
}

.wrapper .form-box li .content input:focus {
  border-color: #007BFF; 
}


.wrapper .button-login {
  width: 90%;
  margin: 6vw auto 0; 
}

.wrapper .button-login button {
  width: 100%;
  height: 12vw;
  font-size: 4vw;
  font-weight: 700;
  color: #fff;
  background-color: #28a745; 
  border-radius: 6px;
  border: none;
  outline: none;
  cursor: pointer; 
  transition: background-color 0.3s; 
  }

.wrapper .button-login button:hover {
  background-color: #218838; 
}


.wrapper .button-register {
  width: 90%;
  margin: 4vw auto;
}

.wrapper .button-register button {
  width: 100%;
  height: 12vw;
  font-size: 4vw;
  font-weight: 700;
  color: #666;
  background-color: #EEE;
  border-radius: 6px;
  border: solid 1px #DDD;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.wrapper .button-register button:hover {
  background-color: #ddd; 
}
</style>
